import classNames from 'classnames';
import { format } from 'date-fns';
import { useTranslation } from 'react-i18next';
import Button from 'src/component/Button';
// import { DepositRecord } from 'src/model/Deposit';
import { bnFormat } from 'src/util/bigNumber';
import style from './DepositTable.module.scss';

type DepositRecord = any

type Props = {
  data: Array<DepositRecord>;
  navigateCallback: (record: DepositRecord) => void;
};

const DepositTable = ({ data, navigateCallback }: Props) => {
  const { t } = useTranslation();

  const onDetailClick = (record: DepositRecord) => () => {
    navigateCallback(record);
  };

  const elementMapFunction = (
    record: DepositRecord,
    index: number,
    array: Array<DepositRecord>,
  ) => (
    <div key={record.FID} className={style.dataRowBlock}>
      <div className={style.dataRow}>
        <div className={classNames(style.item, style.width1)}>{record.FType}</div>
        <div className={classNames(style.item, style.width2)}>{bnFormat(record.FQuantity)}</div>
        <div className={classNames(style.item, style.timeItem, style.width2)}>
          {format(Date.parse(record.FAddtime), 'yyyy/MM/dd HH:mm:ss')}
        </div>
        <div className={classNames(style.item, style.itemAddress, style.widthAddress)}>
          {record.FAddress}
        </div>
        {/* <div className={classNames(style.item, style.detailItem, style.width1)}>
          <Button appearance="text" onClick={onDetailClick(record)}>
            详情
          </Button>
        </div> */}
      </div>
      <div className={classNames(style.divider, { [style.hide]: index >= array.length - 1 })} />
    </div>
  );

  return (
    <div className={style.self}>
      <div className={style.titleRow}>
        <div className={style.width1}>币别</div>
        <div className={style.width2}>数量</div>
        <div className={style.width2}>时间</div>
        <div className={style.widthAddress}>地址</div>
      </div>
      <div className={style.divider} />
      {data.map(elementMapFunction)}
    </div>
  );
};

export default DepositTable;
